<template>
    
    <div v-if="modalType === 'page'" class="preview-container" >
      <div :style="pageStyle()">
        <ComponentRender :key="key" :list="componentList" :isEdit="false" @valueChange="handleValueChange" />
      </div>
      
    </div>  
    <a-modal 
      v-else
      v-model="isShow" 
      title="" 
      centered
      :width="pageSetting.width" 
      :height="pageSetting.height" 
      :bodyStyle="pageStyle()"
      :footer="null">
      <div v-show="isShow" class="preview-container" :style="pageStyle()">
        <ComponentRender :list="componentList" :isEdit="false" @valueChange="handleValueChange" />
      </div>
    </a-modal>
      
        
    
</template>

<script >
import { mapState } from "vuex"
import ComponentRender from "../Editor/Canvas/ComponentRender"
import { getAllAnalysisComponentTypes } from '../lib/analysisData'
import { getComponentByKey } from "../lib/utils"


export default {
  props: {
    modalType: {
      type: String,
      default: 'page'
    },
    value: {
      type: Object,
      default: ()=> {
        return {
          pageSetting: [],
          componentList: {}
        }
      }
    }
    // pageSetting: {
    //   type: Object,
    //   default: ()=> {}
    // },
    // componentList: {
    //   type: Array,
    //   default: ()=> []
    // },
  },
  data() {
    return {
      isShow: false,
      key: Math.random()
      // pageSetting: {}, 
      // componentList: []
    }
  },
  methods: {
    getGeometricStyle(style){
      const {
        left,leftUnit,top,topUnit,width,widthUnit,height,heightUnit
      } = style
      return {
        left: left + leftUnit,
        top: top + topUnit,
        width: width + widthUnit,
        height: height + heightUnit,

      }
    },
    pageStyle(){
      const {
        width,
        height,
      } = this.pageSetting
      return {
        ...this.pageSetting,
        width: `${width}px`,
        height: `${height}px`,
        minWidth: `${width}px`,
        minHeight: `${height}px`
      }
    },
    show(){
      // this.componentList = componentList
      // this.pageSetting = pageSetting
      this.isShow = true
    },
    handleValueChange({value ,key, componentKey}){
      const {
        componentList,
        pageSetting
      } = this.value
      
      const component = getComponentByKey(componentList, componentKey)
      component.props[key] = value
      console.log(component)
      // this.$store.commit("lowCode/setPreviewData", {
      //   pageSetting,
      //   componentList
      // })
      this.$emit("valueChange", {
        componentList,
        pageSetting
      })
      // console.log(this.componentList)
    },
    update(){
      this.key = Math.random()
    }
  },
  computed: {
    // ...mapState("lowCode", {
    //   pageSetting: state => state.pageSetting,
    // })
    // ...mapState("lowCode", {
    //   componentList: state => state.previewData.componentList,
    //   pageSetting: state => state.previewData.pageSetting,
    // })
    componentList() {
      return this.value.componentList
    },
    pageSetting() {
      return this.value.pageSetting
    },
  },
  components: {
    ComponentRender
  },
  
}
</script>

<style lang="less" scoped>
 @import url("./index.less");
</style>
